<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.infomanage.util.*"%>
    
<%  response.addDateHeader("Expires", 0);
	response.setHeader("Pragma","no-cache"); 
	response.setHeader("Cache-Control","no-cache");
	String contextPath = request.getContextPath();
	String filePath = contextPath + Consts.FILE_UPLOAD_SAVE_DIR + "/";
%>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>远程调度预案管理</title>
        <style type="text/css">
            body{font:14px/1.125 "宋体",Arial;}
			#map {
			 float: left;
			 width: 100%;
			 height: 600px;
			}
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&zh-CN"></script>
	    <script type="text/javascript" src="keydragzoom.js" ></script>
	    <script type="text/javascript" src="util.js"></script>
        <script type="text/javascript">
        var filePath = "<%=filePath%>";
        var map;
        var infowindow;
	    var bounds;
	    var markerArray = new Array();
	    var hualianLatlng = new google.maps.LatLng(40.093963,116.33729);
	    var req = null;
        function init() {
          hualianLatlng = new google.maps.LatLng(40.093963,116.33729);
          var mapOptions = {
            zoom: 12,
         // center: new google.maps.LatLng(40.072653,116.303365),
           center: new google.maps.LatLng(28.607092,106.67681),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDoubleClickZoom : true
          }
          map = new google.maps.Map(document.getElementById("map"), mapOptions);
          map.enableKeyDragZoom({
              key: "shift",
              boxStyle: {
                  border: "1px dashed black",
                  backgroundColor: "transparent",
                  opacity: 1
              },
              veilStyle: {
                  backgroundColor: "gray",
                  opacity: 0.1
              },
              visualEnabled: true,
              visualPosition: google.maps.ControlPosition.LEFT,
              visualPositionOffset: new google.maps.Size(35, 0),
              visualPositionIndex: null,
              visualSprite: "http://www.mzwu.com/pic/201105/dragzoom_btn.png",
              visualSize: new google.maps.Size(20, 20),
              visualTips: {
                  off: "开启电子围栏",
                  on: "禁止电子围栏"
              }
          });  

          bounds = new google.maps.LatLngBounds(map.getCenter(),map.getCenter())
	      var rectangle = new google.maps.Rectangle({
	        map : map,
	        bounds : bounds,
	        strokeColor : "black",
	        strokeWeight : "1",
	        strokeOpacity : 1,
	        fillColor : "#E6ECEA",
	        fillOpacity : 0.5
	      });
	      
          var dz = map.getDragZoomObject();
          google.maps.event.addListener(dz, 'dragend', function (bnds) {
        	  rectangle.setBounds(bnds);
        	  /*
              if(bnds.contains(hualianLatlng)){
	        	  log(bnds);
              }
              */
        	  search(bnds);
          });    

		  //动态从datas.xml中读取标注配置
		  downloadUrl("datas.xml", function(data) {
		      var markers = data.documentElement.getElementsByTagName("marker");
		      for (var i = 0; i < markers.length; i++) {
		        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
		                                    parseFloat(markers[i].getAttribute("lng")));
                var title = markers[i].getAttribute("title");
                var id = markers[i].getAttribute("id");
                var address = markers[i].getAttribute("address");
                var telephone = markers[i].getAttribute("telephone");
		        var info = "<table>";
		        info += "<tr><td><strong>矿区名称：</strong></td><td>" + title + "</td></tr>";
		        info += "<tr><td><strong>地&nbsp;&nbsp;&nbsp;址：</strong></td><td>" + address + "</td></tr>";
		        info += "<tr><td><strong>联系电话：</strong></td><td>" + telephone + "</td></tr>";
		        info += "</table>";
		        var marker = createMarker(info, latlng);
		        //填充markerArray
		        var markerInfo = new MarkerInfo(latlng, title, id);
		        markerArray[i] = markerInfo;
		      }
	      });

	      for(var i = 0; i< markerArray.length; i++){
	    	  markerArray[i].write();
		  }
		  google.maps.event.addListener(map, 'click', function() {
			  if(!bounds.equals(rectangle.getBounds())){
				  rectangle.setBounds(bounds);
			  }
			  if (infowindow) infowindow.close();
		  });
        }

		function log(message){
			//var textPane = document.getElementById("textpane");
			//textPane.innerHTML= textPane.innerHTML +"</BR>" + message;
		}

		/*
		* 电子围栏查询
		*/
		function search(retBounds){
			  var ids = "";
		      for(var i =0;i < markerArray.length;i++){
			      if(retBounds.contains(markerArray[i].latlng)){
			    	  ids += markerArray[i].id + ";";
				  }
			  }
		      var URL = "fetchData.jsp?ids=" + ids;
		      downloadUrl(URL, function(data) {
		    	  document.getElementById("docTd").style.display="";
		          var tableObj = document.getElementById("docTb");
		          for(i=0;i<tableObj.cells.length;i++){
		        	  tableObj.cells[i].innerHTML="";
		           }
		    	  var datas = data.documentElement.getElementsByTagName("dept");
		    	  var rowNo = 0;
		    	  for(var i = 0; i < datas.length; i++){
		    		 var deptId = datas[i].getAttribute("deptId");
		    		 var deptName = datas[i].getAttribute("deptName");
		    		 var tableObj = document.getElementById("docTb");
	    		     var tr1=tableObj.insertRow(rowNo); // 获得插入行对象（参数为从第n行插入--注意：第一行为0）
	    		     tr1.style.height="30px";
	    		     var td1=tr1.insertCell(0);
	    		     td1.align = "left";
	    		     td1.style.paddingLeft="10px";
	    		     td1.innerHTML="<span style='color:#0d348b; font-size:14px; font-weight:bold'>" +deptName +"</span>";
	    		     rowNo++;
		    		 var preplans = datas[i].childNodes;
		    		 for(var j = 0; j < preplans.length; j++){
		    			 var preplanTitle = preplans[j].getAttribute("preplanTitle");
		    			 var prepalnStorename = preplans[j].getAttribute("prepalnStorename");
		    		     var tr=tableObj.insertRow(rowNo); // 获得插入行对象（参数为从第n行插入--注意：第一行为0）
		    		     tr.style.height="30px";
		    		     var td=tr.insertCell(0);
		    		     td.align = "left";
		    		     td.style.paddingLeft="40px";
		    		     td.innerHTML="<img src='../../img/word.png'>"
			    		 +"<a href='"+filePath + prepalnStorename+"'>" + "<font size='2'>" + preplanTitle + "</font></a>";
		    			 rowNo++;
			    	 } 
			      }
			  });
	    }

	    function createMarker(title, latlng) {
		    var marker = new google.maps.Marker({position: latlng, map: map});
		    google.maps.event.addListener(marker, "click", function() {
		      if (infowindow) infowindow.close();
		      infowindow = new google.maps.InfoWindow({content: title});
		      infowindow.open(map, marker);
		    });
		    return marker;
		}

	    /**
	    *标注信息类，对应XML中的标注信息
	    */
		function MarkerInfo(latlng, title, id){
			this.latlng = latlng;
			this.title = title;
			this.id = id;

			this.write = function(){
				log(this.latlng);
			}
	    }
        </script>
    </head>
    <body onload="init();" topmargin="0" leftmargin="0" rightmargin="0" scroll="no">
    	<table id="maptb" width="100%" height="100%" border="1px solid " bordercolor="#a3c6e2" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    		<tr>
				<td>
					<div id="map" ></div>
				</td>
				<td id="docTd" style="display:none" valign="top" align="left" width="250px" >
					<table id="docTb" width="100%"  style="border-collapse:collapse;">
					</table>
				</td>    		
    		</tr>
    	</table>
    </body>
</html>
